<template>
  <div class="dashboard-container page-container fullpage">
    <el-card class="dashboard-card" shadow="always">
      <div class="dashboard-header">
        <div class="header-left">
          <el-button type="text" size="small" class="profile-btn" @click="() => router.push('/profile')">个人信息</el-button>
        </div>
        <div class="header-center">
          <h2>欢迎</h2>
          <p>已成功登录日程管理系统</p>
        </div>
        <div class="header-right">
          <el-button type="text" size="small" class="logout-btn" @click="logout">退出</el-button>
        </div>
      </div>

      <div class="dashboard-body left-align two-column">
        <div class="left-col">
          <p class="user-line">当前用户：<strong>{{ username || '未登录' }}</strong></p>

          <div class="schedule-actions horizontal">
            <el-button type="primary" class="action-btn" icon="el-icon-plus" @click="onAdd">增加日程</el-button>
            <el-button type="danger" class="action-btn" icon="el-icon-delete" @click="onDelete">删除日程</el-button>
            <el-button type="warning" class="action-btn" icon="el-icon-edit" @click="onEdit">更改日程</el-button>
            <el-button type="info" class="action-btn" icon="el-icon-view" @click="onView">查看日程</el-button>
          </div>
        </div>

        <div class="right-col">
          <h3>我的日程</h3>
          <div class="table-wrapper">
            <el-table :data="tasks" stripe style="width: 100%;" :row-class-name="''">
              <el-table-column prop="masname" label="任务名" width="180" show-overflow-tooltip />
              <el-table-column prop="massion" label="内容" show-overflow-tooltip />
              <el-table-column prop="massiontime" label="时间" width="180" show-overflow-tooltip />
            </el-table>
          </div>
          <div v-if="loadingTasks" style="text-align:center;margin-top:12px">加载中...</div>
          <div v-if="!loadingTasks && tasks.length===0" style="text-align:center;margin-top:12px;color:#909399">暂无日程</div>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import api from '../utils/api'

const username = ref<string | null>(localStorage.getItem('username'))
const router = useRouter()

const onAdd = () => { try { router.push('/schedule/add') } catch (e) {} }
const onDelete = () => { try { router.push('/schedule/delete') } catch (e) {} }
const onEdit = () => { try { router.push('/schedule/edit') } catch (e) {} }
const onView = () => { try { router.push('/schedule/view') } catch (e) {} }

// tasks
const tasks = ref<any[]>([])
const loadingTasks = ref(false)

const loadTasks = async () => {
  const u = String(localStorage.getItem('username') || '')
  if (!u) { tasks.value = []; return }
  loadingTasks.value = true
  try {
    const resp: any = await api.get('/stumsg', { params: { username: u } })
    // resp may be an object with data array or the array itself depending on backend
    const list = Array.isArray(resp?.data) ? resp.data : (Array.isArray(resp) ? resp : [])
    tasks.value = list
  } catch (e) {
    console.error('加载日程失败', e)
    tasks.value = []
  } finally {
    loadingTasks.value = false
  }
}

onMounted(() => { loadTasks() })

const logout = () => {
  try { localStorage.removeItem('username'); localStorage.removeItem('role') } catch (e) {}
  try { router.push('/login') } catch (e) {}
}
</script>

<style scoped>
.dashboard-container {
  display: flex;
  align-items: center; 
  justify-content: center; 
  padding: 40px;
}
.dashboard-card {
  width: 100%;
  max-width: 1000px; /* 扩大卡片以便右侧表格有更多空间 */
  border-radius: 10px;
  background: rgba(230,243,255,0.9); 
}
.dashboard-body {
  /* 使主体成为 flex 容器，以便将按钮列在卡片内垂直居中 */
  min-height: 220px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.dashboard-header { text-align: center; margin-bottom: 16px }
.dashboard-header { position: relative }
.profile-btn { position: absolute; left: 16px; top: 12px; color: var(--muted-2, #8b95a3) }
.left-align { text-align: left }
.user-line { font-size: 1.05rem; margin-bottom: 12px }
.schedule-actions { display: flex; gap: 12px; margin-top: 18px }
.schedule-actions.vertical { flex-direction: column; align-items: flex-start; width: 100%; justify-content: center }
.schedule-actions.vertical.left-center { justify-content: center }
.action-btn { width: auto; min-width: 180px; padding: 10px 16px; border-radius: 8px; font-size: 1rem }
.two-column { display: flex; gap: 20px; align-items: flex-start }
.left-col { flex: 0 0 260px; display:flex; flex-direction:column; justify-content:center }
.right-col { flex: 1; min-width: 320px }
.table-wrapper { max-height: 420px; overflow: auto; border-radius: 6px; border: 1px solid rgba(0,0,0,0.04); padding: 6px }
.table-wrapper .el-table { width: 100% }
.schedule-actions.horizontal { display:flex; gap:12px; flex-wrap:wrap; align-items:center }
.schedule-actions.horizontal .action-btn { min-width: 140px }
.hint { color: #6b6f76; margin-top: 12px }
.white-btn {
  background: #fff;
  color: #444;
  border: 1px solid rgba(230,238,246,0.9);
  box-shadow: 0 6px 18px rgba(31,54,71,0.03);
}
</style>
